﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>VedioJs</title>
    <link href="~/assets/videojs/video-js.css" rel="stylesheet" />
   
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/assets/videojs/video.js"></script>
    <script src="~/assets/videojs/zh-CN.js"></script>
    <script>
        //video.js在浏览器不支持video标签时设置falsh播放器路径
        videojs.options.flash.swf = "@Url.Content("~/assets/videojs/video-js.swf")";
    </script>
</head>
<body>
    <video id="video_player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1280" height="800"
           poster="@Url.Content("~/assets/videojs/oceans.png")"
           data-setup="{}">
        <source  src="@Url.Content("~/assets/videojs/oceans.mp4")" type='video/mp4' />
        <!--<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
        <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />-->
        <!--支持3中数据格式-->
        @*<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track> <!--字幕开关-->
            <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>*@
        <p class="vjs-no-js">
        当前视频不能播放，可能因为以下原因：<br/>
            1.浏览器禁止执行JavaScript，请开启。<br />
            2.浏览器不支持Html5中的video标签，请升级浏览器。
        </p>
    </video>

    <script type="text/javascript">
        <!--自动播放-->
        videojs("video_player").ready(function () {
            //this.currentTime(20);//设置开始时间
            //this.play();//播放
            this.createTimeRange(10, 20);
        });
        $('#video_player').bind('contextmenu', function () { return false; });
    </script>
</body>
</html>
